<span>Tools</span>

<div class="tool-bar">
    <div class="btn-group" role="group">
        {{#tooltip-container tooltipFor="css-tool-button" placement='left' tooltipContainer='body' as |options| }}
            {{#if (eq options.section 'tooltip')}}
                Toggle page styling
                <p>
                    When page styling is enabled you see the web page as the page author intended,
                    the same way it would appear in a browser. However, sometimes this makes it hard
                    to select the data that you need, for example if there are overlapping parts of
                    the page or if some parts are hidden.
                </p>
                <p>
                    You can disable the page styling which will change the look and layout of the
                    page but will force all content within the page to become visible.
                </p>
            {{else}}
                <button id="css-tool-button" type="button" class="btn btn-default {{if cssEnabled 'active'}}" {{action 'toggleCSS'}}>
                    {{icon-button icon='tool-css'}}
                </button>
            {{/if}}
        {{/tooltip-container}}
    </div>

    <div class="btn-group" role="group">
        {{#tooltip-container tooltipFor="magic-tool-button" placement='left' tooltipContainer='body' as |options| }}
            {{#if (eq options.section 'tooltip')}}
                Magic tool selector
                <p>
                    When the magic tool selector is enabled, it will attempt to choose the most
                    useful tool for you automatically, based on the element you are pointing at in
                    the web page.
                </p>
                <p>
                    You can see which tool is being selected for you by looking at enabled tool
                    selection button, and at the icon visible on the element under the cursor.
                </p>
                <p>
                    If you need, you can manually change the tool for the next click, by switching
                    to it using the tool selection buttons.
                </p>
            {{else}}
                <button id="magic-tool-button" type="button" class="btn btn-default {{if magicToolActive 'active'}}" {{action 'toggleMagicTool'}}>
                    {{icon-button icon='tool-magic'}}
                </button>
            {{/if}}
        {{/tooltip-container}}
    </div>

    <div class="btn-group" role="group">
        {{#each-in selectionModeIcons as |mode icon|}}
            {{#tooltip-container tooltipFor=(get selectionModeIds mode) tooltipContainer='body' text=(get selectionModeText mode) }}
                <button id={{get selectionModeIds mode}} type="button" class="btn btn-default {{if (eq activeSelectionMode mode) 'active'}}" {{action (action (mut selectionMode) mode)}}>
                    {{icon-button icon=icon}}
                </button>
            {{/tooltip-container}}
        {{/each-in}}
    </div>
</div>
